﻿<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>动环监控大屏</title>
	<link rel="stylesheet" type="text/css" href="css/index.css">

</head>

<body>

	<div class="wrap">
		<div class="wid_1820">

			<div class="header">
				<p class="tmtext"><span> &emsp;&emsp;<span></span></span></p>
				<p><span class="hefont" onclick="toindex()">浙江联通机房综合监控系统</span></p>
				<!-- <p><span>管理员<a>[退出]</a></span></p> -->
				<p><span>
						<button style="background-color:transparent;color: white;"
							onclick="window.location.href='./logon.html?username=&password='" value="user">用户</button>
					</span></p>
			</div>

			<h3 class="title ttbg"></br><span></span></h3>
			<div class="baner">
				<a class="jybt">首页</a>
				<a class="czbt">能耗管理</a>
				<a class="kbbt">告警管理</a>
				<a class="wbgl">工单管理</a>
			</div>
			<div class="content content1"> <img class="guang" src="img/title.png" />
				<p class="ctitle">机房能力展示</p>
				<div class="cznl">
					<div class="czl">

						<div class="fxzt">
							<div>
								<!-- <span>设备能力展示</span> -->
								<ul class="fxztul">
									<li class="litime"><span></span>时间<p>2023-01-01</p>
									</li>
									<li class="listate"><span></span>风险状态<p style="color: green;">安全</p>
									</li>
									<li class="linumber"><span></span>机柜已启用<p id="countDeviceUsed"></p>
									</li>
									<li>
										<div class="baojing"></div>
									</li>
								</ul>
							</div>
							<div>
								<!-- <span>机房能力展示</span> -->
								<ul class="fxztul">
									<li class="litime"><span></span>时间<p>2023-01-01</p>
									</li>
									<li class="listate"><span></span>风险状态<p>安全</p>
									</li>
									<li class="linumber"><span></span>机柜已上电<p id="countDeviceCountON"></p>
									</li>
									<li>
										<div class="baojing1"></div>
									</li>
								</ul>
							</div>
							<div>
								<!-- <span>机房能力展示</span> -->
								<ul class="fxztul">
									<li class="litime"><span></span>时间<p>2023-01-01</p>
									</li>
									<li class="listate"><span></span>风险状态<p>一般</p>
									</li>
									<li class="linumber"><span></span>机柜未上电<p id="countDeviceCountOFF"></p>
									</li>
									<li>
										<div class="baojing2"></div>
									</li>
								</ul>
							</div>
						</div>
						<div class="lineDiv">
							<div>
								<div id="line1" class="div1 line1"></div>
								<div id="line2" class="div1 line1"></div>
							</div>
							<div>
								<div id="line3" class="div1 line1"></div>
								<div id="line4" class="div1 line1"></div>
							</div>

						</div>

						<div style="clear: both;"></div>

						<div style="clear: both;"></div>

					</div>

					<div id="pie1" class="echart_div pie1"></div>
					<div id="pie2" class="echart_div pie2"></div>
					<div class="piebt piebt1">告警类型分布</div>
					<div class="piebt piebt2">告警等级分布</div>
					<!-- <div id="guanxi" class="echart_div guanxi"></div> -->

					<div class="gxlist tb">
						<h3>工单列表</h3>
						<!-- <div class="sanlianbt"><a href="xiangqing.html">三链详情</a></div> -->
						<ul id="job">
							<li>中泰证券主承销齐悦科技公司债券成功发行<span class="zm">正面</span></li>
							<li>关于核准山东齐悦科技有限公司向合格投资者公开发行公司债券的批复<span class="zm">正面</span></li>
							<li>关于为山东齐悦科技有限公司2017年非公开发行公司债券(第一期)债券提供转让服务有关事项的通知<span class="zx">中性</span></li>
							<!--<li>中泰证券主承销齐悦科技公司债券成功发行<span class="fm">负面</span></li>
							<li>中泰证券主承销齐悦科技公司债券成功发行<span class="fm">负面</span></li>-->
						</ul>
					</div>
					<div class="jydt">
						<!-- <select id="bar_chat_select"
							style="width: auto; height: 20px; align-content: center; display: block;">
						</select> -->
						<div id="lins1" class="lins1"></div>
						<div class="lines1tb">
							<div class="tb" style="overflow: auto; max-height: 397px;">

								<h3>设备状态变化一览</h3>

								<table class="table1" id="deviceMeteTable">

								</table>
							</div>
						</div>
						<div class="lins2"><span class="lins_t"></span>
							<div class="linsdiv" id="lins2"></div>
						</div>

					</div>
				</div>

			</div>
		</div>
	</div>
</body>

</html>

<script src="libs/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="libs/echarts.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://echarts.baidu.com/build/dist/echarts.js"></script>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
<!-- <script src="js/sanlian.js"></script> -->
<script>
	$(function () {
		var titme1 = "";

		$(".baner a").click(function () {

			//$(".baner a").css("background-color","rgba(255,255,255,0)");
			$(".baner a").removeClass("ahover");
			$(".cznl>div").css("display", "none");
			$(".cznl").css("display", "block");

			var chartid = $(this).attr("class");


			if (chartid === "jybt") {
				$(".jydt").css("display", "block");
				var lins1 = echarts.init(document.getElementById('lins1'));
				var lins2 = echarts.init(document.getElementById('lins2'));

				loadlns1(lins1);
				loadlns2(lins2);
				loadTable();

				$(".ctitle").html("首页");
			}
			else if (chartid === "czbt") {
				$(".czl").css("display", "block");
				$(".ctitle").html("能耗管理");

				var myChart = echarts.init(document.getElementById('line1'));
				var myChart01 = echarts.init(document.getElementById('line2'));
				var myChart02 = echarts.init(document.getElementById('line3'));
				var myChart03 = echarts.init(document.getElementById('line4'));
				getDeviceCountUsed();
				getDeviceCountOFF();
				getDeviceCountON();
				// getPercintCount();
				// window.clearInterval(titme1);
				// option.series[0].data = [5.53];
				// myChart.setOption(option);
				// myChart01.setOption(optioncenter);
				// myChart02.setOption(optionbtm);
				loadLine1(myChart);
				loadLine2(myChart01);
				loadLine3(myChart02);
				loadLine4(myChart03);
			}
			else if (chartid === "kbbt") {
				$(".ctitle").html("告警管理");
				$("#pie1,.piebt").css("display", "block");
				$("#pie2,.piebt").css("display", "block");
				var myChart2 = echarts.init(document.getElementById('pie1'));
				var myChart3 = echarts.init(document.getElementById('pie2'));
				// myChart2.setOption(option2);
				loadPie1(myChart2);
				loadPie2(myChart3);
				// myChart3.setOption(option22);
			}
			else if (chartid === "wbgl") {
				$(".ctitle").html("工单管理");
				/*var guanxi = echarts.init(document.getElementById('guanxi')); 
				guanxi.setOption(option3); */
				$("#guanxi,.gxlist").css("display", "block");
				loadJob();
			}
			$(this).addClass("ahover");


		})
		var address = window.location.href;
		if (address.split("?")[1] == "1") {
			$(".wbgl").click();
			//window.location.href = "index.html";
			var url = window.location.href;
			url = url.split('?')[0];
			window.history.pushState({}, 0, url);
		}
		else {
			$(".baner .jybt").click();
		}

	})
</script>